<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header">
			<el-form ref="searchForm" class="header-area" :model="searchForm" label-width="90px" style="height: auto">
				<el-row>
					<el-col :span="4">
						<el-form-item label="选择类型" prop="ruleType">
							<el-select v-model="searchForm.ruleType" placeholder="选择规则类型" size="small" style="width: 100%;">
								<el-option value="" label="全部"></el-option>
								<el-option value="global" label="全局规则"></el-option>
								<!-- <el-option value="-1" label="已撤档"></el-option> -->
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="选择状态" prop="removeStatus">
							<el-select v-model="searchForm.removeStatus" placeholder="选择规则状态" size="small" style="width: 100%;">
								<el-option value="" label="全部"></el-option>
								<el-option value="0" label="使用中"></el-option>
								<el-option value="1" label="已移除"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="3">
						<div class="search-submit">
							<el-button type="primary" size="small" @click="submitSearch">查询</el-button>
							<el-button type="primary" plain size="small" @click="resetSearch">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>
		
		<!-- 表格 -->
		<template>
			<el-button slot="header" type="primary" @click="add">添加规则</el-button>
			
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
				
				<el-table-column label="分账类型" width="200" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.ruleType == 'global'">全局规则</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column label="平台分账比例" prop="platformRateValue" width="220" align="center"></el-table-column>
				<el-table-column label="基金会分账比例" prop="foundationRateValue" width="220" align="center"></el-table-column>
				<el-table-column label="加盟商家分账比例" prop="shopRateValue" width="220" align="center"></el-table-column>
				<el-table-column label="供应商分账比例" prop="supplierRateValue" width="220" align="center"></el-table-column>
				
				<el-table-column label="状态" width="120" align="center">
					<template slot-scope="scope">
						<el-tag type="info" v-if="scope.row.removeStatus == 1">已移除</el-tag>
						<el-tag type="success" v-if="scope.row.removeStatus == 0">使用中</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column label="创建时间" prop="createTime" :formatter="forDate" align="center"></el-table-column>
				
				<el-table-column fixed="right" label="操作" width="180">
					<template slot-scope="scope">
						<template v-if="scope.row.removeStatus == 0">
							<el-button type="primary" size="small" @click="edit(scope.row)">编辑规则</el-button>
							<el-button type="info" size="small" @click="deleteRule(scope.row)">移除</el-button>
						</template>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<!-- 翻页 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:total="total"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
				></el-pagination>
			</div>
		</template>
		
		<!-- 弹窗 -->
		<template>
			<!-- 添加/编辑弹窗 -->
			<handle-rule-dialog
				:isShow="showHandleDialog"
				:id="currentId"
				:item="currentItem"
				:isEdit="isEdit"
				@submit="getData"
				@close="closeHandleDialog"
			></handle-rule-dialog>
		</template>
	</d2-container>
</template>

<script>
	import { getRuleList, removeRule } from '@api/profitAllocation/profitAllocation'
	import handleRuleDialog from './components/handle-rule-dialog'
	import dayjs from 'dayjs'
	export default {
		components: {
			handleRuleDialog,
		},
		data() {
			return {
				searchForm: {
					ruleType: '',
					removeStatus: '',
				},
				
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				
				showHandleDialog: false,
				isEdit: false,
				currentId: 0,
				currentItem: {},
			}
		},
		methods: {
			getData() {
				getRuleList({
					ruleType: this.searchForm.ruleType,
					removeStatus: this.searchForm.removeStatus,
					page: this.currentPage,
					pageSize: this.pageSize,
				})
					.then(res => {
						let list = res.data.content;
						this.total = res.data.total;
						
						list.forEach(item => {
							item.platformRateValue = parseFloat(item.platformRate / 100).toFixed(3) + '%';
							item.shopRateValue = parseFloat(item.shopRate / 100).toFixed(3) + '%';
							item.supplierRateValue = parseFloat(item.supplierRate / 100).toFixed(3) + '%';
							item.foundationRateValue = parseFloat(item.foundationRate / 100).toFixed(3) + '%';
						});
						
						this.tableData = list;
					})
			},
			handleSizeChange(val) { //处理显示条数
				this.pageSize = val;
				this.getData();
			},
			handleCurrentChange(val) { //处理翻页
				this.currentPage = val;
				this.getData();
			},
			forDate(row, column) { //时间格式化
				if(column.property == 'createTime') {
					return row.createTime ? dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') : '';
				}
			},
			
			submitSearch() { //搜索
				this.currentPage = 1;
				this.getData();
			},
			resetSearch() {
				this.$refs.searchForm.resetFields();
				this.currentPage = 1;
				this.getData();
			},
			
			add() { //添加
				this.showHandleDialog = true;
			},
			edit(item) { //编辑
				this.currentId = item.id;
				this.currentItem = item;
				this.isEdit = true;
				this.showHandleDialog = true;
			},
			closeHandleDialog() { //关闭添加or编辑弹窗
				this.showHandleDialog = false;
				this.isEdit = false;
			},
			
			deleteRule(item) {
				this.$confirm(`您是否确认删除该${item.ruleType == 'global' ? '全局' : ''}规则？`, '温馨提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						removeRule({
							ruleId: item.id
						})
							.then(() => {
								this.$message.success('规则删除成功');
								this.getData();
							})
					})
			}
		},
		mounted() {
			this.getData();
		}
	}
</script>

<style lang="scss" scoped>
	
</style>